<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 审批属性设置 -->
		<div class="approval-attributes" id="approval-attribute-panel">
			<div class="mask"></div>
			<div class="approval-editor-drawer">
				<div class="approval-editor-content">
					<div class="approval-editor-name-wrapper">
						<div class="approval-editor-name">
							审批
						</div>
					</div>
					<div class="approval-editor-form">
						<div class="item-wrapper">
							<div class="approval-type-wrapper">
								<div class="item-key-wrapper">
									<span class="item-key">审批类型</span>
									<label>
										<input type="checkbox" value="不计入审批效率统计" />
										不计入审批效率统计
									</label>
								</div>
								<div class="item-content" id="approval-method">
									<!-- <label>
										<input type="radio" tabGroup="approval-setting-item" tabKey="人工审批"
											name="approvalType" value="人工审批" />
										<span>人工审批</span>
									</label>
									<label>
										<input type="radio" tabGroup="approval-setting-item" tabKey="自动通过"
											name="approvalType" value="自动通过" />
										<span>自动通过</span>
									</label>
									<label>
										<input type="radio" tabGroup="approval-setting-item" tabKey="自动拒绝"
											name="approvalType" value="自动拒绝" />
										<span>自动拒绝</span>
									</label> -->
								</div>
							</div>
						</div>
						<!-- 审批三大功能组 -->
						<div class="">
							<div class="approval-editor-tab-wrapper" tabGroup="approval-setting-item" tabItem="人工审批">
								<div id="approval-setting-tab"></div>
								<div class="approval-function-content-approver-set setting-panel"
									id="approver-setting-panel" tabGroup="approver-setting" tabItem="approver">
									<div class="approval-function-setting-content">
										<!-- 审批设置 -->
										<div class="approver-setting">
											<div class="header">审批人</div>
											<div id="approver-source-selector"></div>
											<!-- 具体审批人选择器 -->
											<div class="sub-content" id="approver-user-selector">
												<div class="sub-content-top-line"></div>
												<!-- 指定人员 -->
												<div class="sub-approver approver-user-selector"
													id="approver-selector-container"
													tabGroup="approver-setting-selector" tabItem="指定成员">
													<p>添加成员<span class="light-text">（不能超过25人）</span></p>
												</div>

												<!-- 直属上级 -->
												<div class="sub-approver approver-user-selector" id="superior-select"
													tabGroup="approver-setting-selector" tabItem="上级">
													<p>指定审批层级</p>
													<div class="add-approver-wrapper superior-selector-wrapper">
														<div class="label">提交人的 </div>
														<div class="supervisor-select">
															<select name="">
																<option value="直属上级">直属上级</option>
																<option value="直属上级加1级">直属上级加1级</option>
																<option value="直属上级加2级">直属上级加2级</option>
															</select>
														</div>
													</div>
													<div class="supervisor-select-tip">
														为避免部分员工未设置上级导致流程错误，可前往 <a
															href="https://www.baidu.com">管理后台</a>检查
													</div>
												</div>

												<!-- 角色 -->
												<div class="sub-approver approver-user-selector"
													tabGroup="approver-setting-selector" tabItem="角色">
													<p>选择角色</p>
													<div class="add-approver-wrapper role-selector-wrapper">
														<div class="radio-line-group">
															<label>
																<input type="radio" name="approval-role" id=""
																	value="单选" />
																<span>单选</span>
															</label>
															<label>
																<input type="radio" name="approval-role" id=""
																	value="自动通过" />
																<span>多选</span>
															</label>
														</div>
													</div>
													<p>选择范围</p>
													<div class="add-approver-wrapper role-selector-wrapper"
														id="xuanzefanwei">
													</div>
												</div>

												<!-- 用户组 -->
												<div class="sub-approver approver-user-selector" id="usergroup-select"
													tabGroup="approver-setting-selector" tabItem="用户组">
													<p>用户组</p>
													<div class="add-approver-wrapper usergroup-selector-wrapper">
														<div class="supervisor-select">
															<select name="">
																<option value="用户组1">用户组1</option>
																<option value="用户组2">用户组2</option>
																<option value="用户组3">用户组3</option>
															</select>
														</div>
													</div>
													<div class="role-info">
														仅展示可见范围内的用户组，可前往 <a href="https://www.baidu.com">管理后台</a>进行配置
													</div>
												</div>

												<!-- 提交人自选 -->
												<div class="sub-approver approver-user-selector" id="selfselect-select"
													tabGroup="approver-setting-selector" tabItem="提交人自选">
													<p>选择方式</p>
													<div class="add-approver-wrapper selfselect-selector-wrapper">
														<div class="supervisor-select">
															<select name="">
																<option value="用户组1">用户组1</option>
																<option value="用户组2">用户组2</option>
																<option value="用户组3">用户组3</option>
															</select>
														</div>
													</div>
													<div class="role-info">
														仅展示可见范围内的用户组，可前往 <a href="https://www.baidu.com">管理后台</a>进行配置
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="add-approver-setting">
										<div class="add-operator">＋ 添加审批人</div>
									</div>
									<!-- 多人审批时 -->
									<div class="item-wrapper">
										<div class="item-key" id="icon-tip">
											多人审批时
											<i aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">
												<svg viewBox="64 64 896 896" focusable="false" class=""
													data-icon="question-circle" width="1em" height="1em"
													fill="currentColor" aria-hidden="true">
													<path
														d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
													</path>
													<path
														d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
													</path>
												</svg></i>
										</div>
										<div class="item-content">
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="会签" />
													<span>会签（需所有人审批人同意）</span>
												</label>
											</div>
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="或签" />
													<span>或签（一名审批人同意即可）</span>
												</label>
											</div>
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="依次审批" />
													<span>依次审批（按顺序依次审批）</span>
												</label>
											</div>
										</div>
									</div>
									<!-- 审批人为空时 -->
									<div class="item-wrapper">
										<div class="item-key">
											审批人为空时
											<i aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">
												<svg viewBox="64 64 896 896" focusable="false" class=""
													data-icon="question-circle" width="1em" height="1em"
													fill="currentColor" aria-hidden="true">
													<path
														d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
													</path>
													<path
														d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
													</path>
												</svg></i>
										</div>
										<div class="item-content">
											<label>
												<input type="radio" name="approvalIsNull" tabGroup="approver-non"
													tabKey="自动通过" value="自动通过" />
												<span>自动通过</span>
											</label>
											<label>
												<input type="radio" name="approvalIsNull" tabGroup="approver-non"
													tabKey="指定审批人" value="指定人员审批" />
												<span>指定人员审批</span>
											</label>
											<label>
												<input type="radio" name="approvalIsNull" tabGroup="approver-non"
													tabKey="转交给管理员审批" value="转交给管理员审批" />
												<span>转交给管理员审批</span>
											</label>
										</div>
										<!-- 指定人员 -->
										<div class="sub-approver approver-user-selector"
											id="approver-selector-container" tabGroup="approver-setting-selector"
											tabItem="指定成员">
											<p>指定成员<span class="light-text">（不能超过25人）</span></p>

										</div>
									</div>
									<!-- 审批人为空时 -->
									<div class="item-wrapper">
										<div class="item-key">
											审批人与提交人为同一人时
											<div id="anticon" aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">？
												<!-- 悬浮提示框 -->
												<div id="remark-info-panel" class="remark-info-panel">
													<div class="tip-content">
														<p class="main-title">什么情况下会出现审批人为空？</p>
														<p>设置了“上级”审批，但申请人在飞书管理后台 - 组织架构中没有上级</p>
														<p>设置了“部门负责人”审批，但申请人在飞书管理后台 - 组织架构中没有部门负责人</p>
														<p>设置了“角色”审批，但该角色在飞书管理后台 - 组织架构中没有任何成员</p>
														<p>设置了“用户组”审批，但该用户组在飞书管理后台 - 组织架构中没有任何成员</p>
													</div>
												</div>
											</div>
										</div>
										<div class="item-content approver-self">
											<div>
												<label>
													<input type="radio" value="自动通过" />
													<span>由提交人自己审批</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="指定人员审批" />
													<span>自动跳过</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="转交给管理员审批" />
													<span>转交给直属上级</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="转交给管理员审批" />
													<span>转交部门负责人审批</span>
												</label>
											</div>
										</div>
									</div>

									<!-- 提示 -->
									<div class="item-wrapper">
										<div class="item-key">提示</div>
										<div class="item-content more-info">
											<p>若审批人离职，会自动转交给审批人的上级代为处理</p>
											<p>若同一审批人在流程中重复出现，默认只审批一次。可前往<span class="goto-other-setting">更多设置</span>修改
											</p>
										</div>
									</div>
									<!-- 抄送人设置 -->
									<div class="item-wrapper">
										<div class="item-key">抄送人设置</div>
										<div class="item-content">
											<div class="add-operator">＋ 添加抄送人</div>
										</div>
									</div>
									<!-- 提示 -->
									<div class="item-wrapper">
										<div class="item-key">提示</div>
										<div class="item-content more-info">
											<p>抄送的人数最多支持100人以内</p>
										</div>
									</div>
								</div>
								<!-- 表单权限设置 -->
								<div class="approval-function-content-form-authority-set setting-panel"
									id="form-authority-setting-panel" tabGroup="approver-setting"
									tabItem="formPrmissions">
									<table>
										<thead>
											<td>表单字段</td>
											<td>
												<label>
													<input type="checkbox" />
													<span>可读</span>
												</label>
											</td>
											<td><label><input type="checkbox" /><span>编辑</span></label></td>
										</thead>
										<tr>
											<td>项目</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>客户</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款发生日期</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款类别</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款金额（元）</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>归属人</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>附件</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>备注</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
									</table>
								</div>
								<!-- 操作权限设置 -->
								<div class="approval-function-content-action-authority-set setting-panel"
									id="operation-authority-panel" tabGroup="approver-setting"
									tabItem="operationPermissions">
									<div class="action-content">
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="允许转交" />
												<span>允许转交</span>
											</label>
										</div>
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="允许加/减签" />
												<span>允许加/减签</span>
											</label>
										</div>
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="上级" />
												<span>允许退回</span>
											</label>
										</div>
									</div>
									<div class="ant-divider ant-divider-horizontal" role="separator"></div>
									<div class="action-sign-content">
										<div class="item-wrap">
											<div class="item-key-wrapper">
												<span class="item-key">手写签名</span>
											</div>
											<div class="item-content">
												<label class="ant-checkbox-wrapper">
													<span class="ant-checkbox">
														<input type="checkbox" class="ant-checkbox-input" value="">
														<span class="ant-checkbox-inner"></span>
													</span>
													<span>
														<span
															class="form-action-permission-normal-font">审批同意时需手写签名</span>
													</span>
												</label>
											</div>
										</div>

										<div class="item-wrap">
											<div class="item-key-wrapper">
												<span class="item-key">审批意见</span>
											</div>
											<div class="item-content">
												<label class="ant-checkbox-wrapper">
													<span class="ant-checkbox">
														<input type="checkbox" class="ant-checkbox-input" value="">
														<span class="ant-checkbox-inner"></span>
													</span>
													<span>
														<span
															class="form-action-permission-normal-font">提交审批需填写审批意见</span>
													</span>
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 按钮 -->
					<div class="approval-editor-footer-wrapper">
						<div class="btn-group">
							<button class="fz-btn primary" type="button">保存</button>
							<button class="fz-btn cancel" type="button">取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var rootNode = new FlowNodes();
	document.body.appendChild(rootNode.getElement());

	var startFlowNode = new FlowNode("提交", "start");
	rootNode.addFlowNode(startFlowNode);
	var approvalFlowNode1 = new FlowNode("审批节点1", "approval");
	rootNode.addFlowNode(approvalFlowNode1)

	var approvalFlowNode2 = new FlowNode("审批节点2", "approval");
	rootNode.addFlowNode(approvalFlowNode2)

	var ccFlowNode = new FlowNode("抄送后勤部", "cc");
	rootNode.addFlowNode(ccFlowNode)

	var flowNodeRoute = new FlowNodeRoute();
	rootNode.addFlowNode(flowNodeRoute)

	var endFlowNode = new FlowNode("结束", "end");
	rootNode.addFlowNode(endFlowNode)

	document.getElementById("anticon").addEventListener("mouseover", (e) => {
		console.log("移入")
		document.getElementById("remark-info-panel").style.display = "block";
	}, true);
	document.getElementById("anticon").addEventListener("mouseout", (e) => {
		console.log("移出", e)
		setTimeout(() => {
			document.getElementById("remark-info-panel").style.display = "none";
		}, 100)
	}, true);



	class ApprovalSettingPanel {
		constructor(arg) {
			this.approvalTypeRadio = new ApprovalTypeRadio(null);
		}

		activeTab(approvalType) {

		}
	}

	/**
	 * 审批类型
	 */
	class ApprovalTypeRadio {
		constructor(approvalAttributePanel) {
			this.approvalAttributePanel = approvalAttributePanel;
			this.approvalTypes = document.querySelectorAll("input[name='approvalType']");
			console.log(this.approvalTypes)
			//监听事件
			for (var i = 0; i < this.approvalTypes.length; i++) {
				let ats = this.approvalTypes[i]
				ats.addEventListener("click", (e) => {
					//this.approvalAttributePanel.activeTab(e.target.value)
				})
			}
		}
	}
	var approvalSettingPanel = new ApprovalSettingPanel();

	class TabSelector {
		constructor(arg) {
			let tabs = document.querySelectorAll("*[tabKey]");
			for (var i = 0; i < tabs.length; i++) {
				let tab = tabs[i]
				tab.addEventListener("click", this.callback)
			}
		}
		callback(e) {
			let tabgroup = e.target.getAttribute("tabgroup");
			let tabKey = e.target.getAttribute("tabKey");
			let targetTabgroups = document.querySelectorAll("*[tabgroup='" + tabgroup + "']")
			for (var j = 0; j < targetTabgroups.length; j++) {
				let targetTabgroup = targetTabgroups[j];
				let tabItem = targetTabgroup.getAttribute("tabItem");

				if (tabItem) {
					if (tabKey == tabItem) {
						targetTabgroup.style.display = "block";
					} else {
						targetTabgroup.style.display = "none";
					}
				}
			}
		}
	}

	let tabSelector = new TabSelector();

	//审批属性设置tab页
	var tabContainer = document.getElementById("approval-setting-tab");
	tabContainer.appendChild(new Tab(["设置审批人", "表单权限", "操作权限"]).getElement());

	//审批方式
	var approvalMethodContainer = document.getElementById("approval-method");
	approvalMethodContainer.appendChild(new RadioGroup("approval-method", [{
		label: "人工审批",
		value: "人工审批"
	}, {
		label: "自动通过",
		value: "自动通过"
	}, {
		label: "自动拒绝",
		value: "自动拒绝"
	}]).getElement())

	//审批人来源选择器
	var approverSourceSelectorContainer = document.getElementById("approver-source-selector");
	var approverSourceOptions = [{
			label: "上级",
			value: "上级"
		},
		{
			label: "部门负责人",
			value: "部门负责人"
		},
		{
			label: "角色",
			value: "角色"
		},
		{
			label: "用户组",
			value: "用户组"
		},
		{
			label: "指定成员",
			value: "指定成员"
		},
		{
			label: "提交人自选",
			value: "提交人自选"
		},
		{
			label: "提交人本人",
			value: "提交人本人"
		},
		{
			label: "节点审批人",
			value: "节点审批人"
		},
		{
			label: "连续多级上级",
			value: "连续多级上级"
		},
		{
			label: "连续多级部门负责人",
			value: "连续多级部门负责人"
		},
		{
			label: "表单内联系人",
			value: "表单内联系人"
		},
		{
			label: "表单内部门",
			value: "表单内部门"
		}
	];
	approverSourceSelectorContainer.appendChild(new RadioGroup("approver-setting-selector", approverSourceOptions)
		.getElement())

	//人员选择器
	var container = document.getElementById("approver-selector-container")
	container.appendChild(new UserSelector().getElement())

	//选择范围
	var fanwei_container = document.getElementById("xuanzefanwei");
	fanwei_container.appendChild(new RadioGroup('user-group', [{
		label: "全公司",
		value: "全公司"
	}, {
		label: "指定成员",
		value: "指定成员"
	}, {
		label: "指定角色",
		value: "指定角色"
	}]).getElement());
</script>
